<template>
    <div class="clothing-style">
        <div class="clothing-style-content">
            <div class="clothing-style-content-basics">
                <h3>
                    A Sustainable Clothing Brand<br /> Needs<span> High-quality Basics</span>
                </h3>
                <p>We sweat the details. Each garment is 100% premium<br /> cotton fabric and finely tailored. Our high-quality basics<br /> deliver value to your customers and leave a positive <br /> lasting impression with no fluff.</p>
                <figure>
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/110U005.png" alt="">
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/140U001.png" alt="">
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/130U001.png" alt="">
                </figure>
            </div>
            <div class="clothing-style-content-trendy">
                <h3>
                    Spice up Your Catalog with<br /> <span> Trendy Silhouettes</span>
                </h3>
                <p>Staying on top of trends is what we pursue. New aesthetics<br /> and functions are continuously purveyed, helping you build a<br /> captivating portfolio that engages your fashion-forward<br /> audience and increases brand awareness.</p>
                <figure>
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/110U017.png" alt="">
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/120U007.png" alt="">
                    <img src="https://img.podpartner.com/static/clothing-images-20231121/130U007.png" alt="">
                </figure>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "HomeClothingStyle",
    props: {
        scroll: { type: Number, default: 0 }, screenHeight: { type: Number, default: 0 }

    },
    data () {
        return {
            dom: null,
            offsetTop: 0,
        }

    },
    watch: {
        scroll (v) {
            this.doAnimation(v)
        }
    },

    methods: {
        clamp (min, num, max) {
            return Math.min(Math.max(num, min), max);
        },
        doAnimation (scroll) {
            let clientHeight = this.dom.basics.clientHeight;
            let rate_basics = this.clamp(0, (scroll - this.offsetTop + clientHeight / 2) / clientHeight, 1);
            let rate_trendy = this.clamp(0, (scroll - this.offsetTop - clientHeight / 2) / clientHeight, 1);

            this.dom.basics.style.setProperty('--basics-animation-count', rate_basics);
            this.dom.trendy.style.setProperty('--trendy-animation-count', rate_trendy);
        },
        getDoms () {
            let section = document.documentElement.querySelector('.clothing-style');
            let basics = document.documentElement.querySelector('.clothing-style-content-basics');
            let trendy = document.documentElement.querySelector('.clothing-style-content-trendy');
            // 获取需要操作的元素
            this.dom = {
                section, basics, trendy
            };
            this.offsetTop = section.offsetTop;
        },
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms()
    }
}
</script>
<style scoped lang="scss">
.clothing-style {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
}

.clothing-style-content {
    & > div {
        height: var(--home-screen-height);
        min-height: 720px;
        position: relative;
        h3 {
            font-size: 64px;
            font-family: Roboto-Bold, Roboto;
            font-weight: 400;
            color: #000;
            line-height: 78px;
            margin-bottom: 40px;
            span {
                color: #fbbc06;
            }
        }
        p {
            font-family: Roboto;
            font-size: 24px;
            font-weight: 400;
            color: #000;
            line-height: 36px;
        }
        figure {
            position: absolute;
            width: 220px;
            height: 220px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                position: absolute;
                width: 220px;
                height: 220px;
            }
        }
    }
}

.clothing-style-content-basics {
    & > figure {
        right: 100px;
        top: 280px;
        img {
            transform: translate(0, 0);
            &:nth-child(1) {
                transform: translate(200px, -180px);
            }
            &:nth-child(2) {
                width: 312px;
                height: 312px;
                transform: translate(0, 0);
            }
            &:nth-child(3) {
                transform: translate(-200px, 180px);
            }
        }
    }
}
.clothing-style-content-trendy {
    h3 {
        & > span {
            color: #ea4c89 !important;
        }
    }
    text-align: right;
    > figure {
        left: 116px;
        top: 340px;
        img {
            transform: translate(0, 0);
            &:nth-child(1) {
                transform: translate(-200px, -180px);
            }
            &:nth-child(2) {
                width: 312px;
                height: 312px;
                transform: translate(0, 0);
            }
            &:nth-child(3) {
                transform: translate(200px, 180px);
            }
        }
    }
}

// 动画部分css
@media screen and (min-width: 960px) {
    .clothing-style-content-basics {
        --basics-animation-count: 0;
        @keyframes clothing-img-basics {
            0% {
                width: 312px;
                height: 312px;
                transform: translate(-468px, 468px);
            }
            25% {
                width: 312px;
                height: 312px;
                transform: translate(-312px, 260px);
            }
            50% {
                width: 312px;
                height: 312px;
                transform: translate(0, 0);
            }
            75% {
                width: 220px;
                height: 220px;
                transform: translate(312px, -260px);
            }
            100% {
                width: 220px;
                height: 220px;
                transform: translate(468px, -468px);
            }
        }

        & > figure {
            img {
                position: absolute;
                width: 220px;
                height: 220px;
                transform: translate(-468px, 468px);
                animation: clothing-img-basics linear 0s forwards;
                animation-iteration-count: 0;
                &:nth-child(1) {
                    animation-iteration-count: clamp(
                        0,
                        calc(var(--basics-animation-count) + 0.4),
                        1
                    );
                }
                &:nth-child(2) {
                    animation-iteration-count: clamp(
                        0,
                        calc(var(--basics-animation-count) + 0.2),
                        1
                    );
                }
                &:nth-child(3) {
                    animation-iteration-count: clamp(
                        0,
                        var(--basics-animation-count),
                        1
                    );
                }
            }
        }
    }

    .clothing-style-content-trendy {
        --trendy-animation-count: 0;
        @keyframes clothing-img-trendy {
            0% {
                width: 312px;
                height: 312px;
                transform: translate(468px, 468px);
            }
            25% {
                width: 312px;
                height: 312px;
                transform: translate(312px, 260px);
            }
            50% {
                width: 312px;
                height: 312px;
                transform: translate(0, 0);
            }
            75% {
                width: 220px;
                height: 220px;
                transform: translate(-312px, -260px);
            }
            100% {
                width: 220px;
                height: 220px;
                transform: translate(-468px, -468px);
            }
        }

        & > figure {
            img {
                position: absolute;
                width: 220px;
                height: 220px;
                transform: translate(-468px, 468px);
                animation: clothing-img-trendy linear 0s forwards;
                animation-iteration-count: 0;
                &:nth-child(1) {
                    animation-iteration-count: clamp(
                        0,
                        calc(var(--trendy-animation-count) + 0.4),
                        1
                    );
                }
                &:nth-child(2) {
                    animation-iteration-count: clamp(
                        0,
                        calc(var(--trendy-animation-count) + 0.2),
                        1
                    );
                }
                &:nth-child(3) {
                    animation-iteration-count: clamp(
                        0,
                        var(--trendy-animation-count),
                        1
                    );
                }
            }
        }
    }
}
// 移动端css
@media screen and (max-width: 960px) {
    .clothing-style {
        min-height: auto;
        .clothing-style-content {
            .clothing-style-content-basics,
            .clothing-style-content-trendy {
                max-width: 520px;
                margin: 60px 0;
                padding: 0 14px;
                height: auto;
                min-height: auto;
                & > h3 {
                    font-size: 25px;
                    line-height: 32px;
                    text-align: left;
                    margin-bottom: 14px;
                    & > br {
                        display: none;
                    }
                }
                & > p {
                    text-align: left;
                    font-size: 19px;
                    font-weight: 400;
                    color: #000000;
                    line-height: 28px;
                    margin-bottom: 24px;
                    & > br {
                        display: none;
                    }
                }
                & > figure {
                    position: static;
                    width: 100%;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    transform: none;
                    img {
                        width: 32%;
                        max-width: 240px;
                        position: static;
                        height: auto;
                        transform: translate(0, 0);
                        -webkit-animation: none;
                        animation: none;
                    }
                }
            }
            .clothing-style-content-basics {
                margin-bottom: 200px;
            }
        }
    }
}
</style>
